/* eslint-disable */
<<template>
    <div @dblclick="dbClickFun" :style="{
        width:$props.target.props.width.value+'px',
        height:$props.target.props.height.value+'px',
        fontFamily:$props.target.props.fontFamily.value,
        color:$props.target.props.color.value,
        fontSize:$props.target.props.fontSize.value + 'px'
        
        }">
       <div v-html="html" :style="{width:($props.target.props.width.value-6)+'px',height:($props.target.props.height.value-6)+'px',resize: 'none',
        textAlign:$props.target.props.textAlign.value,
        verticalAlign:$props.target.props.verticalAlign.value}" style="display:table-cell" v-if="!editing"></div>
    </div>
</template>
<style lang='less' scoped>
    .test {
        text-align: center;
    }
</style>
<<script>

function toHtml (text) {
        return text.replace(/\r\n/g, '<br/>').replace(/\r/g, '<br/>').replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;')
    }
export default {
    props: {
        target: Object,
        designerMode: String
    },
    data () {
        return {
            text: '',
            editing: false
        }
    },
    computed: {
        content: {
            get () {
                return this.$props.target.props.content.value
            }
        },
        html: {
            get () {
                return toHtml(this.$props.target.props.content.value)
            }
        }
    },
    methods: {
        stopEvt (evt) {
            if (this.editing) {
                if (evt.key === 'Escape') {
                    this.editing = false
                }
                evt.stopPropagation()
            }
        },
        dbClickFun () {
            if (this.designerMode === 'editing') {
                this.editing = !this.editing
            }
        }
    },
    components: {
    }
}
</script>
